<style lang="less">
  .mtable{

  }
  .el-tooltip__popper {
    width: 600px;
  }
</style>
<template>
  <section>
    <div class="mtickling">
    <search-bar more-display>
      <el-row >
        <el-col :span="8">
          <el-form-item label="反馈类型">
            <el-select v-model="searchCondition.ticklingType" placeholder="请选择反馈类型">
              <el-option
              v-for="item in $store.getters.FEEDBACK_TYPE"
              :label="item.cnDictValname"
              :key="item.dictVal"
              :value="item.dictVal"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="反馈日期">
            <el-date-picker type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            v-model="searchCondition.createDate"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="处理状态">
            <el-select v-model="searchCondition.ticklingStatus" placeholder="请选择处理状态">
              <el-option
              v-for="item in $store.getters.INDICATOR"
              :label="item.cnDictValname"
              :key="item.dictVal"
              :value="item.dictVal"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="反馈人">
            <el-input v-model="searchCondition.userName" placeholder="请输入反馈人"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系方式">
            <el-input v-model="searchCondition.contactPhone" placeholder="请输入联系方式"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </search-bar>
    <el-col :span="24">
      <el-button type="primary" style="float: left;margin-bottom: 10px" @click="exportTickling">导出</el-button>
      <el-button type="primary" style="float: right;margin-bottom: 10px" @click="resetConditions">重置</el-button>
      <el-button type="primary" style="float: right;margin-bottom: 10px" @click="searchTableDate">查询</el-button>
    </el-col>
    <el-table :data="tableData" border max-height="650" class="mtable">
      <el-table-column prop="ticklingNum" label="反馈号" width="100px" sortable></el-table-column>
      <el-table-column prop="createDate" label="反馈时间" width="200px" sortable></el-table-column>
      <el-table-column prop="userName" label="反馈人" width="150px" ></el-table-column>
      <el-table-column prop="contactPhone" label="联系方式" width="150px" ></el-table-column>
      <el-table-column prop="ticklingTypeName" label="反馈类型" width="100px" ></el-table-column>
      <el-table-column label="反馈详情" width="400px"  prop="ticklingText" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="handleMark" label="处理备注" width="400px" show-overflow-tooltip >
    </el-table-column>
      <el-table-column label="操作" width="149px">
        <template slot-scope="scope">
          <el-button v-if="scope.row.ticklingStatus === 111002002" type="primary" @click="handleTickling(scope.row)">处理登记</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--工具条-->
    <el-col :span="24" >
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        @size-change="handlePageSizeChange"
        @current-change="handleCurrentPageChange"
        layout="total,sizes,prev, pager, next, jumper"
        :total="total" style="float: right;margin-top: 10px">
      </el-pagination>
    </el-col>
    <el-dialog title="处理登记" :visible.sync="dialogVisiable" >
      <el-form>
      <el-form-item required label="请确认反馈问题是否已经处理并在以下登记处理情况">
        <el-input type="textarea" v-model="handleText" :rows="5" resize="none"></el-input>
      </el-form-item>
        <el-button type="primary" @click="confirmHandle" style="float: right;">确认</el-button>
      </el-form>
    </el-dialog>
    </div>
  </section>
</template>
<script>
import {searchTicklings, confirmHandleTickling} from '../../api/customer/Tickling.js';
import {resetObjNull} from '../../lib/util';
export default {
  data () {
    return {
      tableData: [],
      searchCondition: {
        ticklingType: null,
        createDate: null,
        ticklingStatus: null,
        userName: null,
        contactPhone: null
      },
      currentPage: 1,
      pageSize: 10,
      total: 0,
      sortProp: 'sorts',
      sortOrder: 'descending',
      filter: '',
      handleText: '',
      dialogVisiable: false
    };
  },
  methods: {
    handlePageSizeChange (val) {
      this.pageSize = val;
      this.getTableDate(this.filter);
    },
    handleCurrentPageChange (val) {
      this.currentPage = val;
      this.getTableDate(this.filter);
    },
    handleTickling (val) {
      this.id = val.id;
      this.dialogVisiable = true;
      this.handleText = '';
    },
    exportTickling () {
      location.href = '/api/v2.0/admin/tickling_export?filters=' + this.filter;
    },
    confirmHandle () {
      if (this.handleText === '' || this.handleText === null || this.handleText === undefined) {
        this.$message.error('处理登记不能为空');
        return;
      }
      confirmHandleTickling(this.id, this.handleText).then((res) => {
        if (res.data.successFlg) {
          this.$message.success('处理成功');
          this.getTableDate(this.filter);
          this.dialogVisiable = false;
        }
      });
    },
    searchTableDate () {
      let filters = '';
      for (let p in this.searchCondition) {
        if (this.searchCondition[p] !== null && this.searchCondition[p] !== undefined && this.searchCondition[p] !== '') {
          if (p === 'ticklingType' || p === 'ticklingStatus') {
            filters += p + '=' + this.searchCondition[p] + ';';
          } else if (p === 'createDate') {
            if (this.searchCondition[p].length === 2 && this.searchCondition[p][0] !== undefined && this.searchCondition[p][1] !== undefined) {
              filters += 'createDate>=' + this.searchCondition[p][0].toJSON() + ' g1;';
              let date2 = this.$ue.addDays(this.searchCondition[p][1], 1);
              filters += 'createDate<=' + date2.toJSON() + ' g2;';
            }
          } else if (p === 'userName' || p === 'contactPhone') {
            filters += p + '?' + this.searchCondition[p] + ';';
          }
        }
      }
      this.filter = filters;
      this.getTableDate(this.filter);
    },
    getTableDate (filters) {
      searchTicklings({
        filters: filters,
        sorts: '-createDate',
        size: this.pageSize,
        page: this.currentPage
      }).then((res) => {
        if (res.data.successFlg) {
          this.tableData = res.data.detailModelList;
          this.currentPage = res.data.currPage;
          this.pageSize = res.data.pageSize;
          this.total = res.data.totalCount;
        }
      });
    },
    // 排序操作
    sortChange (o) {
      this.sortProp = o.prop;
      this.sortOrder = o.order;
      this.getTableDate(this.filter);
    },
    resetConditions () {
      resetObjNull(this.searchCondition);
      this.filter = '';
    }
  },
  mounted () {
    this.$store.commit('initDict');
    this.getTableDate('');
  }
};
</script>
